<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2022-01-09 15:43:31
 * 天凉好个秋
-->
<template>
    <svg :class="svgClass" :style="style" aria-hidden="true">
        <use class="use" :href="symbolId" />
    </svg>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'

export default defineComponent({
    name: 'SvgIcon',
    props: {
        prefix: {
            type: String,
            default: 'icon'
        },
        name: { //svg名
            type: String,
            required: true
        },
        size: { //尺寸
            type: [String, Number],
            default: 16,
        },
        fill: { //填充颜色
            type: String,
            default: 'currentColor'
        },
        className: { //自定义类名
            type: String,
            default: ''
        },
        hover: {    //hover到图标上时变为完全不透明，开启此项会为图标默认设置0.7透明度
            type: Boolean,
            default: false
        }
    },
    setup(props) {
        const symbolId = computed(() => `#${props.prefix}-${props.name}`)
        const svgClass = computed(() => {
            const { className, hover } = props
            let cls = `svg-icon`
            if (className) {
                cls = `svg-icon ${props.className}`
            }
            if (hover) {
                cls += ' hoverd'
            }
            return cls
        })
        const style = computed(() => {
            const { size, fill } = props;
            let s = `${size}`;
            s = `${s.replace('px', '')}px`;
            return {
                width: s,
                height: s,
                fill,
            };
        })
        return { symbolId, svgClass, style }
    }
})
</script>
<style lang="scss" scope>
.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.1em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
    fill: currentColor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
    overflow: hidden;
    cursor: pointer;
    transition-property: color;
    transition-duration: .3s;
}
.hoverd {
    fill-opacity: 0.7;
    &:hover {
        fill-opacity: 1;
    }
}
</style>